<template>
  <div class="dashboard-container">
    <a-row :gutter="24">
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="总小说数"
            :value="statistics.totalNovels"
            :precision="0"
          >
            <template #prefix>
              <a-icon type="book" />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="总作者数"
            :value="statistics.totalAuthors"
            :precision="0"
          >
            <template #prefix>
              <a-icon type="user" />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="本月新增"
            :value="statistics.newNovels"
            :precision="0"
          >
            <template #prefix>
              <a-icon type="rise" />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="总阅读量"
            :value="statistics.totalReads"
            :precision="0"
          >
            <template #prefix>
              <a-icon type="eye" />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="24" style="margin-top: 24px">
      <a-col :span="12">
        <a-card title="热门小说排行">
          <a-table
            :columns="columns"
            :data-source="hotNovels"
            :pagination="false"
            :row-key="record => record.id"
          >
            <template #rank="{ index }">
              {{ index + 1 }}
            </template>
          </a-table>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="分类统计">
          <div ref="categoryChart" style="height: 300px"></div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import * as echarts from 'echarts/core';
import { PieChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  CanvasRenderer
]);

export default {
  name: 'NovelDashboard',
  data() {
    return {
      statistics: {
        totalNovels: 1234,
        totalAuthors: 456,
        newNovels: 78,
        totalReads: 987654
      },
      columns: [
        {
          title: '排名',
          scopedSlots: { customRender: 'rank' },
          width: 80
        },
        {
          title: '小说名称',
          dataIndex: 'title'
        },
        {
          title: '作者',
          dataIndex: 'author'
        },
        {
          title: '阅读量',
          dataIndex: 'reads'
        }
      ],
      hotNovels: [
        {
          id: 1,
          title: '斗破苍穹',
          author: '天蚕土豆',
          reads: 1000000
        },
        {
          id: 2,
          title: '武动乾坤',
          author: '天蚕土豆',
          reads: 890000
        },
        {
          id: 3,
          title: '大主宰',
          author: '天蚕土豆',
          reads: 780000
        },
        {
          id: 4,
          title: '凡人修仙传',
          author: '忘语',
          reads: 670000
        },
        {
          id: 5,
          title: '遮天',
          author: '辰东',
          reads: 560000
        }
      ],
      categoryChart: null
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initCategoryChart();
    });
  },
  beforeDestroy() {
    if (this.categoryChart) {
      this.categoryChart.dispose();
      this.categoryChart = null;
    }
  },
  methods: {
    initCategoryChart() {
      if (this.$refs.categoryChart) {
        this.categoryChart = echarts.init(this.$refs.categoryChart);
        this.categoryChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            right: 10,
            top: 'center'
          },
          series: [
            {
              name: '小说分类',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 335, name: '玄幻' },
                { value: 310, name: '武侠' },
                { value: 234, name: '都市' },
                { value: 135, name: '科幻' },
                { value: 148, name: '其他' }
              ]
            }
          ]
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 24px;
  background: #f0f2f5;
  min-height: 100vh;
}
</style> 